/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, InputLine, TextArea, Input, BlobInputList,
} from "customize-easy-ui-component";
import {
    InspectRecordLayout, InternalItemProps,  useItemInputControl,
} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {EditStorageContext} from "../../StorageContext";
import {usePrefixDataEdit} from "../../hook/usePrefixData";


interface Props  extends InternalItemProps{
    label?: string;
    titles?: any[];
    //不考虑两个类型都兼容，加？  | any[]
    config: ( (verId:string,orc:any)=>any[] )  | any[];
    iAname?: string[];           //附加的存储那些字段     ，'观测备注'
}

//上一个是利用 useThreeColumnView 配合 ThreeConfigRaft 编辑组件来做的。
const input转场爆片={
    edit:(inp:any,setInp:(a:any)=>void)=>{
        return <div><Text css={{fontSize:'0.7rem'}}>后续6个参数属爆破片装置：</Text>
            <InputLine  label='爆破片装置 > 型号'>
                <Input  value={inp?.爆型号 ||''}
                        onChange={e => setInp({ ...inp, 爆型号: e.currentTarget.value||undefined}) } />
            </InputLine>
        </div>;
    },
    //names: ['设计温','壳程设计温度'],     //contentArr.map(([_,name] : any, i:number)=> name),
    //toTail: '设计温度太多了需要另行设定',
};
export const config安全附件 = [
    [[{pr:'安全阀', span:3, t:'型号'}, '安型号'],  ['数量', {n:'安数量', u:'个'},] ],
    [[{t:'校验日期'}, {n:'安验日',t:'d'}], ['校验记录编号', '安校报'] ],
    [[{t:'整定压力'}, {n:'安整压', u:'MPa'}],  ['安装位置', {n:'安安位', t:'B'},] ],
    //还有一种 prview: 的回调做法？
    // [ [{pr:'性能参数', span:4, t:'容积', view:view容积}, '_$容积换热', render容积换热],    ['内径', '_$内径','mm'],  ],
    [[{pr:'爆破片装置', span:3, t:'型号'}, '爆型号', input转场爆片],  ['数量', {n:'爆数量', u:'个'},] ],
    [[{t:'规格'}, '爆规格', ], ['更换周期要求', '爆周期'] ],
    [[{t:'更换日期'}, {n:'爆换日',t:'d'}, ],   ['安装位置', {n:'爆安位', t:'B'}, ] ],
    // [[{t:'容积', view:view容积}, '_$容积换热',  render容积换热], ['容器内径', '_$内径','mm'],  ],
    // [[{pr:'设计压力', span:2, t:'壳体（壳程）'}, '_$壳程设计压力', 'MPa'],   [{pr:'使用压力', span:2, t:'壳体（壳程）'}, '_$壳程使用压力' , 'MPa'] ],
    // [[{t:'夹套（管程）'}, '_$管程设计压力', 'MPa'],   [{t:'夹套（管程）'}, '_$管程使用压力' , 'MPa'] ],
    // [[{pr:'腐蚀裕度（mm）', span:2, t:'筒体',prview: view腐蚀}, '_$筒体腐裕度'], [{pr:'介质', span:2, t:'壳体（壳程）'}, '_$壳程介质'] ],
];

export const itemA安全附件: string[]=['快开联锁','其他阀检','安附备注','安附结果' ];
/**资料审查主体  config={config资料审查}
 * */
export const SafetyAccesor=
    React.forwardRef((
        { children, show ,alone=true,verId,redId,nestMd,label,config,iAname}:Props,  ref
    ) => {
        const {storage, setStorage} =React.useContext(EditStorageContext) as any;
        const {inp, setInp} = useItemInputControl({ref});
        const newconfig = React.useMemo(() => {
            return (typeof config ==='function'? config(verId!,storage) : config);
        }, [config,verId,storage]);
        //【重大】毛病啊config: 动态的就导致：死循环依赖热 【最后】接了一个useMemo包裹呢 @还不能用inp替换storage来做的。
        const [renderEditline, itemA类概况] = usePrefixDataEdit({
                     inp, setInp, config: newconfig! });
        const itemA = React.useMemo(() => {
            return [ ...iAname ?? [], ...itemA类概况, ...itemA安全附件];
        }, [ iAname]);
        const [getInpFilter] = useMeasureInpFilter(null, itemA,);
        return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                    nestMd={nestMd} alone={alone} label={label!}>
            <Text variant="h5">{label}：</Text>
            {renderEditline}
            快开门式压力容器安全联锁装置 &gt; 使用环境、校验周期、校验方法是否符合设计要求:
            <BlobInputList value={inp?.快开联锁 || ''} rows={2}  datalist={['符合', ]}
                           onListChange={v => setInp({...inp, 快开联锁: v || undefined}) } />
            其他阀门、附件检验：
            <TextArea  value={inp?.其他阀检 ||''} rows={5}
                       onChange={e => setInp({ ...inp, 其他阀检: e.currentTarget.value||undefined}) } />
            备注：
            <TextArea  value={inp?.安附备注 ||''} rows={4}
                       onChange={e => setInp({ ...inp, 安附备注: e.currentTarget.value||undefined}) } />
            检查结果：
            <TextArea  value={inp?.安附结果 ||''} rows={3}
                       onChange={e => setInp({ ...inp, 安附结果: e.currentTarget.value||undefined}) } />
            { children }
        </InspectRecordLayout>;
    });
